<template>
	<view>
		<view class="top">
			<u-tabs :list="tabList" :current="current" @change="change" :scrollable="false"></u-tabs>
		</view>
		<view class="order-block">
			<view class="order-title" @click="runDetail(current)">
				<view>订单编号:12345678912<image src="../../static/orderIcon.png"></image>
				</view>
				<view>
					<text>已取消</text>
					<text v-show="current==1">待发货</text>
					<text v-show="current==3">待评价</text>
					<text v-show="current==2">待收货</text>
					<text v-show="current==3">已完成</text>
					<text v-show="current==4">申请售后</text>
				</view>
			</view>
			<view class="order-con" @click="runDetail(current)">
				<image src="../../static/logo.png"></image>
				<view>
					<view class="title">商品名称商品名称商品名称商品名称商品名称商品</view>
					<view class="space"><text>规格</text><text>X1</text></view>
					<view class="des"><text>团购金额:￥39元</text><text>上交金额:￥38元</text></view>
				</view>
			</view>
			<view class="order-con2" @click="runDetail(current)">
				<view>所属分销：艳艳</view>
				<view>商品时间：2023-09-22 17：27：20</view>
				<view>下单时间：2023-09-22 17：27：20</view>
			</view>
			<view class="order-btm">
				<view class="btn" v-show="current==3">再次购买</view>
				<view class="btn" v-show="current==1" @click="cancel()">取消</view>
				<view class="btn" v-show="current==2" @click="suresh()">确认收货</view>
				<view class="btn" v-show="current==3" @click="goEvalate()">去评价</view>
				<view class="btn" v-show="current==4" @click="returned()">我已退货</view>
				<view class="btn" v-show="current==4" @click="returns()">退货详情</view>
				<view class="btn" v-show="current==4">再次申请</view>
				<view class="btn2" v-show="current==1">申请退款</view>
				<view class="btn2" v-show="current==1 || current==2 || current==3">分享</view>
				<view class="btn2" v-show="current==2" @click="seeLogistics()">查看物流</view>
				<view class="btn2" @click="goAftersal()" v-show="current==2 || current==3">申请售后</view>
				<view class="btn2" v-show="current==3 || current==4">删除订单</view>
				<view class="btn2" v-show="current==4" @click="cxsh()">撤销售后</view>

			</view>
		</view>
		<u-popup :show="showpopup" closeOnClickOverlay mode="center" round="8">

			<view class="pop-con">
				确定取消订单吗?
			</view>
			<view class="btn-block">
				<view class="pop-fou" @click="no()">
					取消
				</view>
				<view class="pop-btn" @click="yes()">
					确定
				</view>
			</view>
		</u-popup>
		<u-popup :show="showsh" closeOnClickOverlay mode="center" round="8">

			<view class="pop-con">
				确定收货吗?
			</view>
			<view class="btn-block">
				<view class="pop-fou" @click="nosh()">
					取消
				</view>
				<view class="pop-btn" @click="yessh()">
					确定
				</view>
			</view>
		</u-popup>
		<u-popup :show="showcx" closeOnClickOverlay mode="center" round="8">

			<view class="pop-con">
				确定撤销吗?
			</view>
			<view class="btn-block">
				<view class="pop-fou" @click="nocx()">
					取消
				</view>
				<view class="pop-btn" @click="yescx()">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '全部'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, {
					name: '售后'
				}],
				current: 0,
				showpopup: false,
				showsh: false,
				showcx: false
			}
		},
		onLoad() {
			this.current = uni.getStorageSync("current")
		},
		methods: {
			change(e) {
				this.current = e.index
			},
			//订单详情
			runDetail() {
				uni.navigateTo({
					url: '/pages/order/orderdetil/orderdetil?current =' + this.current
				})

			},
			cancel() {
				this.showpopup = true
			},
			yes() {
				this.showpopup = false
			},
			no() {
				this.showpopup = false
			},

			suresh() {
				this.showsh = true
			},
			nosh() {
				this.showsh = false
			},
			yessh() {
				this.showsh = false
			},
			cxsh() {
				this.showcx = true
			},
			nocx() {
				this.showcx = false
			},
			yescx() {
				this.showcx = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f9f9f9;
	}

	.top {
		width: 722rpx;
		height: auto;
		margin: 0 auto;
		margin-top: 32rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.order-block {
		width: 682rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;

		.order-title {
			width: auto;
			height: auto;
			border-bottom: 1rpx solid #F5F5F5;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 89rpx;
			padding: 0 20rpx;

			image {
				width: 25rpx;
				height: 25rpx;
				margin-left: 20rpx;
			}

			view:last-child {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.order-con {
			padding: 0 20rpx;
			display: flex;

			image {
				width: 180rpx;
				height: 180rpx;
				margin: 20rpx 10rpx 20rpx 0;
			}

			view {
				width: 450rpx;

				.title {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
					margin-top: 20rpx;
				}

				.space {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #777777;
					line-height: 50rpx;
					display: flex;
					justify-content: space-between;
				}

				.des {
					font-size: 26rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 50rpx;
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.order-con2 {
			padding: 0 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
		}

		.order-btm {
			padding: 30rpx 20rpx 27rpx 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;

			display: flex;
			flex-direction: row-reverse;

			.btn {
				width: 170rpx;
				height: 68rpx;
				border-radius: 50rpx;
				line-height: 68rpx;
				background: linear-gradient(to bottom, #F9773A, #FF3B06);
				text-align: center;
				color: #FFFFFF;
				margin-left: 10rpx;
			}

			.btn2 {
				width: 168rpx;
				height: 66rpx;
				border-radius: 50rpx;
				line-height: 68rpx;
				border: #AAAAAA solid 1px;
				text-align: center;
				color: #333333;
				margin-left: 10rpx;
			}
		}

	}

	.pop-title {
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 45rpx;
		margin-top: 43rpx;
	}

	.pop-con {
		width: 390rpx;
		padding: 0 129rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 60rpx;
		margin-top: 22rpx;
	}

	.btn-block {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.pop-btn {
		width: 280rpx;
		height: 90rpx;
		background: linear-gradient(to bottom, #F9773A, #FF3B06);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		opacity: 1;
		margin: 47rpx auto;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 90rpx;
	}

	.pop-fou {
		width: 280rpx;
		height: 90rpx;
		background: #f9a94d;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 90rpx;
		margin: 47rpx auto;
		text-align: center;
	}
</style>